<template>
  <div class="curriculum">
    <mt-header fixed title="课程" style="background:#ffa200; color:#fff">
      <router-link to="" slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="curr_back">
      <div class="btn">
        <div class="curr_rush">
          <img src="../../../static/image/logo.png" />
        </div>
        <span>税东家(国际)税务商学院</span>
      </div>
      <img src="../../../static/image/headchang.png" />
    </div>
    <div
      v-infinite-scroll="getCardList"
      infinite-scroll-disabled="moreLoading"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false"
    >
      <div
        class="Valueaddedtax_box"
        v-for="(item, index) in classList"
        :key="index"
      >
        <div class="Valueaddedtax_txt">
          <span style="margin-left: 0.30rem;font-size:0.30rem;">{{
            name
          }}</span>
        </div>

        <div class="Valueaddedtax">
          <div class="Valueaddedtax_txt1" @click="valueTxt(item)">
            <div class="Valueaddedtax_img">
              <img :src="item.imgUrl" />
            </div>
            <div class="Valueaddedtax_cend">
              <div>{{ item.name }}</div>
              <div
                style="display:flex;justify-content: space-between;margin-top:0.50rem;"
              >
                <span style="color:#ccc;font-size:0.25rem;"
                  >{{ item.buyNum }}人开通</span
                >
                <span style="font-size:0.25rem;color:#F82E18;"
                  >￥{{ item.price }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { columnList } from "../../api/api";
import querystring from "query-string";
import { Header, InfiniteScroll, Toast } from "mint-ui";

export default {
  name: "",
  data() {
    return {
      page: 2,
      classList: [],
      name: "",
      id: "",
      queryLoading: true,
      moreLoading: false,
      allLoaded: false,
      iosShow: false
    };
  },
  methods: {
    couEasier() {
      let that = this;
      console.log(that.page);
      that.bus.$emit("loading", true); //开始
      let params = {
        proId: that.id,
        page: 1,
        size: 10
      };
      params = querystring.stringify(params);
      let a = localStorage.getItem("token");
      a = JSON.parse(a);
      columnList(params, a).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          console.log(res.data.data);
          this.classList = res.data.data;
        } else {
          Toast(res.data.message);
        }
        that.bus.$emit("loading", false); //结束
      });
    },
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      console.log(ua); //Ios终端
      //Android终端
      //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
      // console.log(isAndroid)
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    },
    //上拉加载
    getCardList() {
      if (this.allLoaded) {
        this.moreLoading = true;
        return;
      }
      if (!this.queryLoading) {
        return;
      }
      this.moreLoading = true;
      var params = {
        page: this.page,
        proId: this.id,
        size: 10
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      columnList(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.length > 0) {
            this.page += res.data.data.length;
            res.data.data.forEach(element => {
              this.classList.push(element);
            });
            this.moreLoading = false;
          } else {
            this.allLoaded = true;
            this.moreLoading = true;
            // Toast("没有更多数据");
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
    clickRouter() {
      this.$router.push({
        path: "/Generalhospital/curriculum",
        query: { name: this.name, id: this.id }
      });
    },
    //专栏详情
    valueTxt(item) {
      this.$router.push({
        path: "/Branch/catalog",
        query: { columnId: item.columnId }
      });
    }
  },
  mounted() {
    this.couEasier();
  },
  created() {
    this.name = this.$route.query.name;
    this.id = this.$route.query.id;
    this.Phonetype();
  }
};
</script>
<style scoped  lang="scss" >
.curriculum {
  width: 100%;
  height: auto;
  padding-bottom: 1.1rem;
  padding-top: 40px;
}

.curr_back {
  width: 100%;
  height: 3.06rem;
  position: relative;
}

.curr_back img {
  width: 100%;
  height: 100%;
}

.btn {
  position: absolute;
  top: 1.9rem;
  left: 0rem;
  width: 7rem;
  height: 0.96rem;
  border-radius: 0.2rem;
  display: flex;
  /* justify-content: space-between; */
  line-height: 0.96rem;
  font-size: 0.3rem;
  box-sizing: border-box;
  padding: 0 0.2rem 0 0.2rem;
}

.curr_rush {
  margin-top: 0.05rem;
}

.btn span {
  font-size: 0.4rem;
  color: #fff;
  margin-left: 0.22rem;
}

.curr_rush img {
  width: 0.84rem;
  height: 0.84rem;
}

.Valueaddedtax {
  width: 7rem;
  height: auto;
  margin: auto;
  /* margin-top:30rpx; */
}

.Valueaddedtax_txt {
  display: flex;
  justify-content: space-between;
  height: 0.78rem;
  line-height: 0.78rem;
  border-bottom: 0.02rem solid #eee;
}

.Valueaddedtax_txt1 {
  display: flex;
  justify-content: space-between;
  height: 2.21rem;
  border-bottom: 0.02rem solid #eee;
}

.Valueaddedtax_img {
  width: 2.1rem;
  height: 1.6rem;
  margin: auto;
  margin-left: 0.2rem;
}

.Valueaddedtax_img img {
  width: 100%;
  height: 100%;
}

.Valueaddedtax_cend {
  width: 4.45rem;
  font-size: 0.3rem;
  padding: 0.26rem;
}
</style>